<!DOCTYPE html>
<html style="height: 90%">
<head>
    <meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0;background-color: RGB(16,12,42)">
<b style="color: whitesmoke;font-size: 30px;position: absolute;left: 700px;top: 30px">每月租车情况</b>
<div id="container" style="height: 90%;width: 100%;top:100px;left: 0px"></div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
<script type="text/javascript">
    var dom = document.getElementById("container");
    var myChart = echarts.init(dom,'dark');
    var app = {};
    var option;
    var posList = [
        'left', 'right', 'top', 'bottom',
        'inside',
        'insideTop', 'insideLeft', 'insideRight', 'insideBottom',
        'insideTopLeft', 'insideTopRight', 'insideBottomLeft', 'insideBottomRight'
    ];

    app.configParameters = {
        rotate: {
            min: -90,
            max: 90
        },
        align: {
            options: {
                left: 'left',
                center: 'center',
                right: 'right'
            }
        },
        verticalAlign: {
            options: {
                top: 'top',
                middle: 'middle',
                bottom: 'bottom'
            }
        },
        position: {
            options: posList.reduce(function (map, pos) {
                map[pos] = pos;
                return map;
            }, {})
        },
        distance: {
            min: 0,
            max: 100
        }
    };

    app.config = {
        rotate: 90,
        align: 'left',
        verticalAlign: 'middle',
        position: 'insideBottom',
        distance: 15,
        onChange: function () {
            var labelOption = {
                normal: {
                    rotate: app.config.rotate,
                    align: app.config.align,
                    verticalAlign: app.config.verticalAlign,
                    position: app.config.position,
                    distance: app.config.distance
                }
            };
            myChart.setOption({
                series: [{
                    label: labelOption
                }, {
                    label: labelOption
                }, {
                    label: labelOption
                }, {
                    label: labelOption
                }]
            });
        }
    };


    var labelOption = {
        show: true,
        position: app.config.position,
        distance: app.config.distance,
        align: app.config.align,
        verticalAlign: app.config.verticalAlign,
        rotate: app.config.rotate,
        formatter: '{c}  {name|{a}}',
        fontSize: 16,
        rich: {
            name: {}
        }
    };

    option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        legend: {
            data: ['casual', 'registered', 'Cnt']
        },
        toolbox: {
            show: true,
            orient: 'vertical',
            left: 'right',
            top: 'center',
            feature: {
                mark: {show: true},
                dataView: {show: true, readOnly: false},
                magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']},
                restore: {show: true},
                saveAsImage: {show: true}
            }
        },
        xAxis: [
            {
                type: 'category',
                axisTick: {show: false},
                data: ['Jan-11', 'Feb-11', 'Mar-11', 'Apr-11', 'May-11', 'Jun-11', 'Jul-11', 'Aug-11', 'Sep-11', 'Oct-11', 'Nov-11', 'Dec-11',
                    'Jan-12', 'Feb-12', 'Mar-12', 'Apr-12', 'May-12', 'Jun-12', 'Jul-12', 'Aug-12', 'Sep-12', 'Oct-12', 'Nov-12', 'Dec-12']
            }
        ],
        yAxis: [
            {
                type: 'value'
            }
        ],
        series: [
            {
                name: 'casual',
                type: 'bar',
                barGap: 0,
                label: labelOption,
                emphasis: {
                    focus: 'series'
                },
                data: [3073, 6242, 12826, 22346, 31050, 30612, 36452, 28842, 26545, 25222, 15594, 8448,
                    8969, 8721, 31618, 38456, 44235, 43294, 41705, 43197, 43778, 34538, 21009, 13245]
            },
            {
                name: 'registered',
                type: 'bar',
                label: labelOption,
                emphasis: {
                    focus: 'series'
                },
                data: [35116, 41973, 51219, 72524, 104771, 112900, 104889, 107849, 100873, 98289, 86573, 78875,
                    87775, 94416, 133257, 135768, 151630, 159536, 161902, 171306, 174795, 164303, 131655, 110468]
            },
            {
                name: 'Cnt',
                type: 'bar',
                label: labelOption,
                emphasis: {
                    focus: 'series'
                },
                data: [38189, 48215, 64045, 94870, 135821, 143512, 141341, 136691, 127418, 123511, 102167, 87323,
                    96744, 103137, 164875, 174224, 195865, 202830, 203607, 214503, 218573, 198841, 152664, 123713]
            }
        ]
    };

    if (option && typeof option === 'object') {
        myChart.setOption(option);
    }
</script>

<iframe scrolling="auto" frameborder="0" width="1500px" height="1000px" src="wkx_2不同天气下每个小时的平均租赁数量.html"></iframe>
<iframe scrolling="auto" frameborder="0" width="1700px" height="1000px" src="wkx_3休息日平均每小时的租车情况.html"></iframe>
<iframe scrolling="auto" frameborder="0" width="1700px" height="1000px" src="wkx_4不同风速下每小时最大使用量.html"></iframe>
<iframe scrolling="auto" frameborder="0" width="1700px" height="1000px" src="wkx_5不同天气下，各月份的租车人数.html"></iframe>
</body>
</html>